<template>
    <div class="home" style="">
        <div class="left">
            <div class="preview">
                <h5>preview</h5>
                {{result}}
            </div>
            <el-divider/>
            <div class="logger">
                <h5>logger-console</h5>
                <div v-html="logs">
                </div>
            </div>
        </div>
        <el-divider direction="vertical" class="split"/>
        <div class="right">
            <div style="margin-bottom: 10px;">
                示例代码
                <el-select v-model="targetCode">
                    <el-option v-for="(v,k) in codes" :value="k" :label="k"></el-option>
                </el-select>
                <el-button @click="play">play</el-button>
                <div v-if="totalStep > 0">
                    <el-button @click="goPrev">prev</el-button>
                    {{currentStep+1}}/{{totalStep}}
                    <el-button @click="goNext">next</el-button>
                </div>
            </div>
            <code-editor ref="editor" class="editor h-100" v-model="editorContent"
                         language="java" theme="dracula"></code-editor>
        </div>
    </div>
</template>

<script>
    // @ is an alias to /src

    import CodeEditor from "./code-editor";
    import SIMPLE from "./code/simple";
    import LOOP from "./code/loop";

    const codes = {
        SIMPLE,
        LOOP
    }
    export default {
        name: 'Home',
        components: {
            CodeEditor
        },
        data() {
            return {
                editorContent: "",
                result: "",
                logs: "",
                totalStep: 0,
                currentStep: 1,
                resp: {},
                targetCode: "SIMPLE",
                codes
            }
        },
        watch:{
            targetCode: {
                immediate: true,
                handler(nv){
                    this.editorContent = this.codes[nv]
                }
            }
        },
        methods: {
            reset(){
                this.result = ""
                this.logs = ""
                this.totalStep = 0
                this.currentStep = 1
                this.resp = {}
            },
            async play() {
                this.reset()
                var r = await this.$post("/api/test", {code: this.editorContent})
                if (!r.loggerEntities.length) {
                    //如果为空，则直接显示结果
                    this.buildLogs(r.logs)
                } else {
                    this.resp = r
                    this.totalStep = r.loggerEntities.length
                    this.goTo(0)
                }
                // this.$refs.editor.gotoLine(10)
            },

            buildLogs(logs){
                this.logs = logs.map(e => `<div class="line">${e}</div>`).join("")
            },
            goTo(num){
                this.currentStep = num
                console.log(num, this.resp.loggerEntities)
                this.buildLogs(this.resp.loggerEntities[num].logs)
                this.result = this.resp.loggerEntities[num].result
                this.$refs.editor.gotoLine(this.resp.loggerEntities[num].lineNo + 1)

            },
            goPrev(){
                if(this.currentStep <= 0){
                    return
                }
                this.goTo(this.currentStep - 1)
            },
            goNext(){
                if(this.currentStep + 1 >= this.totalStep){
                    return
                }
                this.goTo(this.currentStep + 1)
            }
        }



    }
</script>

<style scoped>
    .home {
        display: flex;
        flex-direction: row;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px;
    }

    .left {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .preview {
        flex: 1;
    }

    .logger {
        flex: 1;
    }

    .right {
        flex: 1
    }

    .split {
        height: 100%;
    }
</style>


